<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
		<meta content="yes" name="apple-mobile-web-app-capable" />
		<link rel="apple-touch-icon" href="/favicon.ico" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
		/>
		<title>ChatGPT Web</title>
	</head>

	<body class="dark:bg-black">
		<div id="app">
			<style>
				.mesh-loader {
					overflow: hidden;
					height: 100vh;
					width: 100vw;
				}

				.mesh-loader .circle {
					width: 25px;
					height: 25px;
					position: absolute;
					background: #03a9f4;
					border-radius: 50%;
					margin: -12.5px;
					-webkit-animation: mesh 3s ease-in-out infinite;
					animation: mesh 3s ease-in-out infinite -1.5s;
				}

				.mesh-loader > div .circle:last-child {
					-webkit-animation-delay: 0s;
					animation-delay: 0s;
				}

				.mesh-loader > div {
					position: absolute;
					top: 50%;
					left: 50%;
				}

				.mesh-loader > div:last-child {
					-webkit-transform: rotate(90deg);
					transform: rotate(90deg);
				}

				@-webkit-keyframes mesh {
					0% {
						-webkit-transform-origin: 50% -100%;
						transform-origin: 50% -100%;
						-webkit-transform: rotate(0);
						transform: rotate(0);
					}
					50% {
						-webkit-transform-origin: 50% -100%;
						transform-origin: 50% -100%;
						-webkit-transform: rotate(360deg);
						transform: rotate(360deg);
					}
					50.00001% {
						-webkit-transform-origin: 50% 200%;
						transform-origin: 50% 200%;
						-webkit-transform: rotate(0deg);
						transform: rotate(0deg);
					}
					100% {
						-webkit-transform-origin: 50% 200%;
						transform-origin: 50% 200%;
						-webkit-transform: rotate(360deg);
						transform: rotate(360deg);
					}
				}
				@keyframes mesh {
					0% {
						-webkit-transform-origin: 50% -100%;
						transform-origin: 50% -100%;
						-webkit-transform: rotate(0);
						transform: rotate(0);
					}
					50% {
						-webkit-transform-origin: 50% -100%;
						transform-origin: 50% -100%;
						-webkit-transform: rotate(360deg);
						transform: rotate(360deg);
					}
					50.00001% {
						-webkit-transform-origin: 50% 200%;
						transform-origin: 50% 200%;
						-webkit-transform: rotate(0deg);
						transform: rotate(0deg);
					}
					100% {
						-webkit-transform-origin: 50% 200%;
						transform-origin: 50% 200%;
						-webkit-transform: rotate(360deg);
						transform: rotate(360deg);
					}
				}
			</style>
			<div class="loading-wrap">
				<div class="mesh-loader">
					<div class="set-one">
						<div class="circle"></div>
						<div class="circle"></div>
					</div>
					<div class="set-two">
						<div class="circle"></div>
						<div class="circle"></div>
					</div>
				</div>
			</div>
		</div>
		<script type="module" src="/src/main.ts"></script>
	</body>
</html>
x